<template>
  <div class="bigdata flex-col">
    <Header></Header>
    <div class="flex-1 content flex-row bigdata_body">
      <div class="flex-col left">
        <div class="box flex-1">
          <div class="bd flex-col" style="height:100%">
            <div class="hd flex-row">
              <div class="title">
                <img src="./static/bigdata/equitment.png" alt="">
              </div>
              <div class="flex-1"></div>
            </div>
            <div class="flex-1 flex-col">
              <!-- 设备列表 -->
              <div class="list" :style="{ 'height': controlHeight + 'px' }">
                <div class="item" v-for="(item, index) in list" :key="index" @click.stop="item.isOpen = !item.isOpen">
                  <div class="title flex-row align-center">
                    <img src="./static/bigdata/three.png" class="three_img" alt="" :class="{ 'rot': item.isOpen == true }">
                    <div>{{ item.title }}</div>
                  </div>
                  <div class="co flex-row align-center justify-center" v-for="(e, i) in item.list" :key="i"
                    v-show="item.isOpen == true" :class="{ 'active': child_id == e.id }"
                    @click.stop="child_id = e.id, lookVideoUrl(e),lookGasData(e)">
                    <div class="left_img"><img src="./static/bigdata/four.png" alt=""></div>
                    <div class="detail_title flex-1">{{ e.title }}</div>
                    <div class="status flex-row align-center" style="color:green;padding-right:10px"
                      v-if="e.is_online == 10"><span
                        style="width:6px;height:6px;border-radius:2em;background:green;margin:0 5px;"></span>在线</div>
                    <div class="status flex-row align-center" style="color:#999;padding-right:10px"
                      v-if="e.is_online == 20"><span
                        style="width:6px;height:6px;border-radius:2em;background:#999;margin:0 5px;"></span>离线</div>
                    <template v-if="e.is_online == 10">
                      <div class="zb"><img src="./static/bigdata/zb.png" alt=""></div>
                      <div class="lx" v-if="e.device_type != 10"><img src="./static/bigdata/lx.png" alt=""></div>
                    </template>
                    <template v-if="e.is_online == 20">
                      <div class="zb"><img src="./static/bigdata/no_live.png" alt=""></div>
                      <div class="lx" v-if="e.device_type != 10"><img src="./static/bigdata/no_live.png" alt=""></div>
                    </template>
                  </div>
                </div>
              </div>
              <div class="flex-row align-center justify-center">
                <div class="show flex-row align-center">
                  <div class="flex-1 flex-col align-center item">
                    <div class="title">氧气</div>
                    <div class="title2">{{ fourData.o2 }}</div>
                    <div class="title3">(%)</div>
                  </div>
                  <div class="flex-1 flex-col align-center item">
                    <div class="title">一氧化碳</div>
                    <div class="title2">{{ fourData.co }}</div>
                    <div class="title3">(ppm)</div>
                  </div>
                  <div class="flex-1 flex-col align-center item">
                    <div class="title">硫化氢</div>
                    <div class="title2">{{ fourData.h2s }}</div>
                    <div class="title3">(ppm)</div>
                  </div>
                  <div class="flex-1 flex-col align-center item">
                    <div class="title">可燃气</div>
                    <div class="title2">{{ fourData.ex }}</div>
                    <div class="title3">(%)</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-row">
              <div><img src="./static/bigdata/right.png" class="rotate-180" alt=""></div>
              <div class="flex-1"></div>
              <div><img src="./static/bigdata/right.png" alt=""></div>
            </div>
          </div>
        </div>
        <div class="box" id="control">
          <div class="bd flex-col" style="height:100%">
            <div class="hd flex-row">
              <div class="title">
                <img src="./static/bigdata/controll.png" alt="">
              </div>
              <div class="flex-1"></div>
            </div>
            <div class="flex-1">
              <!-- 云控制台 -->
              <div class="kz_content flex-col" v-if="selectItem.device_type == 10">
                <div class="flex-row align-center">
                  <div class="nine_btn flex-col justify-center">
                    <div class="nine_bg">
                      <div class='slice-one slice' @mousedown="device_control('Up')" @mouseup="sendStop()"><img src="./static/bigdata/ok.png"
                          alt="">
                      </div>
                      <div class='slice-two slice' @mousedown="device_control('UpRight')" @mouseup="sendStop()" > <img
                          src="./static/bigdata/ok.png" alt=""></div>
                      <div class='slice-three slice'  @mousedown="device_control('Right')" @mouseup="sendStop()"> <img
                          src="./static/bigdata/ok.png" alt=""></div>
                      <div class='slice-four slice' @mousedown="device_control('DownRight')"  @mouseup="sendStop()"> <img
                          src="./static/bigdata/ok.png" alt=""></div>
                      <div class='slice-five slice' @mousedown="device_control('Down')"  @mouseup="sendStop()"><img
                          src="./static/bigdata/ok.png" alt=""> </div>
                      <div class='slice-six slice' @mousedown="device_control('DownLeft')"  @mouseup="sendStop()"> <img
                          src="./static/bigdata/ok.png" alt=""></div>
                      <div class='slice-seven slice' @mousedown="device_control('Left')"  @mouseup="sendStop()"><img
                          src="./static/bigdata/ok.png" alt=""> </div>
                      <div class='slice-eight slice' @mousedown="device_control('UpLeft')"  @mouseup="sendStop()"> <img
                          src="./static/bigdata/ok.png" alt=""></div>
                      <div class="center"></div>
                    </div>
                  </div>
                  <div class="flex-1 right_btn flex-col" style="background:none; height:auto">
                    <div class="flex-1 flex-row align-center justify-center">
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn add" @mousedown="device_control('ZoomTele')"  @mouseup="sendStop()"></div>
                      </div>
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn flex-row align-center">变倍</div>
                      </div>
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn reduce" @mousedown="device_control('ZoomWide')"  @mouseup="sendStop()"></div>
                      </div>
                    </div>
                    <div class="flex-1 flex-row align-center justify-center">
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn add" @mousedown="device_control('FocusNear')"  @mouseup="sendStop()"></div>
                      </div>
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn flex-row align-center">变焦</div>
                      </div>
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn reduce" @mousedown="device_control('FocusFar')"  @mouseup="sendStop()"></div>
                      </div>
                    </div>
                    <!--
                    <div class="flex-1 flex-row align-center justify-center">
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn add" @mousedown="device_control('IrisOpen')"></div>
                      </div>
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn flex-row align-center">光圈</div>
                      </div>
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn reduce" @mousedown="device_control('IrisClose')"></div>
                      </div>
                    </div>
                    -->
                  </div>
                </div>
                <div class="flex-row align-center bottom_content new_p">
                  <el-switch class="flex-1" style="display: block" v-model="xhSwitch" @change="xhChange"
                    inactive-color="#999" active-color="rgba(14, 123, 180, 0.5)" inactive-text="巡航">
                  </el-switch>
                  <el-switch class="flex-1" style="display: block" v-model="smSwitch" @change="smChange"
                    inactive-color="#999" active-color="rgba(14, 123, 180, 0.5)" inactive-text="扫描">
                  </el-switch>
                  <el-switch class="flex-1" style="display: block" v-model="dgSwitch" @change="dgChange"
                    inactive-color="#999" active-color="rgba(14, 123, 180, 0.5)" inactive-text="灯光">
                  </el-switch>
                  <!-- <div class="flex-1"></div> -->
                  <!-- <div class="" @click="speakComputed" v-if="startSpeak==false"><img src="../bigdata/static/bigdata/five_speek.png" alt=""></div>
                  <div class="" @click="stop" v-if="startSpeak==true"><img src="../bigdata/static/bigdata/five_speek.png" alt=""></div> -->
                </div>
                <!-- <div class="flex-row align-center bottom_content new_p">
                  <el-switch class="flex-1"
                  style="display: block"
                  v-model="value2"
                  inactive-color="#999"
                  active-color="rgba(14, 123, 180, 0.5)"
                  inactive-text="语音对讲">
                </el-switch>
                  <el-switch class="flex-1"
                    style="display: block"
                    v-model="value2"
                    inactive-color="#999"
                    active-color="rgba(14, 123, 180, 0.5)"
                    inactive-text="灯光">
                  </el-switch>
                  <div class="" style="width:50px;margin-left:5px">  <el-checkbox v-model="checked">自动</el-checkbox>
                  </div>
                </div> -->
                <!-- <div class="c_progress flex-row align-center">
                  <span style="padding-right:10px">云台速度</span>
                  <div class="flex-1 progress">
                    <progre :percent="70" @percentChange="onPercentChange"></progre>
                  </div>
                </div>

                <div class="flex-row align-center bottom_content">
                  <div class="flex-1">
                    <div class="btn_bg flex-row align-center justify-center" style="margin-left:0">
                      <el-dropdown>
                        <span class="el-dropdown-link">
                          预置位<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>黄金糕</el-dropdown-item>
                          <el-dropdown-item>狮子头</el-dropdown-item>
                          <el-dropdown-item>螺蛳粉</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </div>
                  <div class="flex-row">
                    <div class="right_btn" style="padding:0">调用</div>
                    <div class="right_btn" style="padding:0">清除</div>
                  </div>
                </div> -->
              </div>
              <div class="kz_content flex-col" v-else>
                <div class="flex-row align-center">
                  <div class="four_btn flex-col justify-center">
                    <div class="flex-1 flex-row">
                      <div class="flex-1"></div>
                      <!-- 上 -->
                      <div class="flex-1"></div>
                      <div class="flex-1"></div>
                    </div>
                    <div class="flex-1 flex-row">
                      <!-- 左 -->
                      <div class="flex-1"></div>
                      <!-- 刷新 -->
                      <div class="flex-1"></div>
                      <!-- 右 -->
                      <div class="flex-1"></div>
                    </div>
                    <div class="flex-1 flex-row">
                      <div class="flex-1"></div>
                      <!-- 下 -->
                      <div class="flex-1"></div>
                      <div class="flex-1"></div>
                    </div>
                  </div>
                  <div class="flex-1 right_btn flex-col" style="height:100%; background:none">
                    <div class="flex-1 flex-row align-center justify-center">
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn add"></div>
                      </div>
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn search"></div>
                      </div>
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn reduce"></div>
                      </div>
                    </div>
                    <div class="flex-1 flex-row align-center justify-center">
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn add"></div>
                      </div>
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn sxj"></div>
                      </div>
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn reduce"></div>
                      </div>
                    </div>
                    <div class="flex-1 flex-row align-center justify-center">
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn add"></div>
                      </div>
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn circle"></div>
                      </div>
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn reduce"></div>
                      </div>
                    </div>
                    <div class="flex-1 flex-row align-center justify-center">
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn photo"></div>
                      </div>
                      <div class="flex-1 flex-row align-center justify-center">
                        <div class="some_btn biu"></div>
                      </div>
                      <div class="some_btn flex-1 flex-row align-center justify-center" style="margin:0">
                        <!-- <div class="" @click="speakComputed" v-if="startSpeak==false"><img src="../bigdata/static/bigdata/five_speek.png" alt=""></div>
                        <div class="" @click="stop" v-if="startSpeak==true"><img src="../bigdata/static/bigdata/five_speek.png" alt=""></div> -->
                      </div>
                    </div>
                    <div class="flex-1 flex-row">
                      <div class="flex-1"></div>
                      <el-switch style="display: block" @change="switchValue" v-model="light" inactive-color="#999"
                        active-color="rgba(14, 123, 180, 0.5)" inactive-text="灯光">
                      </el-switch>
                    </div>
                  </div>
                </div>
                <!-- <div class="c_progress flex-row align-center">
                  <span style="padding-right:10px">速度</span>
                  <div class="flex-1 progress">
                    <progre :percent="70" @percentChange="onPercentChange"></progre>
                  </div>
                </div>
                <div class="flex-row align-center bottom_content">
                  <div class="flex-1"></div>
                  <el-switch
                    style="display: block"
                    v-model="value2"
                    inactive-color="#999"
                    active-color="rgba(14, 123, 180, 0.5)"
                    inactive-text="手动拍照">
                  </el-switch>
                  <div class="btn_bg flex-row align-center justify-center">调色模式</div>
                </div>
                <div class="flex-row align-center bottom_content">
                  <div class="flex-1"></div>
                  <el-switch
                    style="display: block"
                    v-model="value2"
                    inactive-color="#999"
                    active-color="rgba(14, 123, 180, 0.5)"
                    inactive-text="语音对讲">
                  </el-switch>
                  <div class="btn_bg flex-row align-center justify-center">扫描模式</div>
                </div>
                <div class="flex-row align-center bottom_content">
                  <div class="flex-1"></div>
                  <el-switch
                    style="display: block"
                    v-model="value2"
                    inactive-color="#999"
                    active-color="rgba(14, 123, 180, 0.5)"
                    inactive-text="红外伪彩图切换">
                  </el-switch>
                  <div class="" style="width:117px;margin-left:50px">  <el-checkbox v-model="checked">异物检测</el-checkbox>
                  </div>
                </div> -->
              </div>
            </div>
            <div class="flex-row">
              <div><img src="./static/bigdata/right.png" class="rotate-180" alt=""></div>
              <div class="flex-1"></div>
              <div><img src="./static/bigdata/right.png" alt=""></div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 flex-col right">
        <div class="flex-row align-center">
          <div class="flex-1 flex-row">
            <div class="tab" v-for="(e, i) in threeData" :key="i">
              <div class="tab_img" @click="selTab(e, i)" :class="{ 'tab_sel': currentIndex == e.id }">{{ e.title }}</div>
            </div>
          </div>
          <el-switch style="display: block" v-model="value2" inactive-color="#999"
            active-color="rgba(14, 123, 180, 0.5)" active-text="视频轮播">
          </el-switch>
          <div class="right_btn">
            <el-dropdown>
              <span class="el-dropdown-link">
                分屏<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item divided @click.native="currentNum = 3">3</el-dropdown-item>
                <el-dropdown-item divided @click.native="currentNum = 4">4</el-dropdown-item>
                <el-dropdown-item divided @click.native="currentNum = 6">6</el-dropdown-item>
                <el-dropdown-item divided @click.native="currentNum = 8">8</el-dropdown-item>
                <el-dropdown-item divided @click.native="currentNum = 10">10</el-dropdown-item>
                <el-dropdown-item divided @click.native="currentNum = 12">12</el-dropdown-item>
                <el-dropdown-item divided @click.native="currentNum = 24">24</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="flex-1" id="videoContent">
          <el-row :gutter="10">
            <el-col :style="{ height: videoHeight + 'px' }" :span="spanNum" class="flex-col" v-for="(e, i) in videoNum"
              :key="i">
              <div class="grid_item flex-1" :class="{ 'active': currentVideo == i }" @click="currentVideo = i">
                <div class="grid_content">
                  <JessibucaDemo v-if="e.videoUrl && e.videoUrl.length > 0" :deviceId="selectItem.id"
                    @speakComputed="speakComputed" @endComputed="endComputed" :screen_width="videoWidth"
                    :screen_height="videoHeight" :videoUrl="e.videoUrl" @closeVideo="closeVideo"
                    :control_Btn="currentVideo == i ? true : false" />
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="warnVisible" width="520px" :append-to-body="true" class="comDialog">
      <div class="content">
        <div class="flex-row header align-center ">
          <div class="title flex-1">{{ warn_item.warning_type_title }}</div>
          <div style="cursor: pointer;" @click="warnVisible = false"><img style="padding-right:10px;"
              src="../../views/bigdata/static/bigdata/close.png" alt=""></div>
        </div>
        <div class="body">
          <div class="b_content flex-col">
            <div class="flex-row item name"><img src="../../views/bigdata/static/bigdata/book.png"
                style="padding-right:5px;" alt="">{{ warn_item.device_title }}/{{ warn_item.group_title }}</div>
            <div class="flex-row item" style="padding-top:10px">{{ warn_item.content }}</div>
          </div>
          <div style="width:100%;" class="flex-row align-center justify-center">
            <span slot="footer" class="dialog-footer flex-row ">
              <el-button class="colorBtn big flex-1" type="primary"
                @click="warnVisible = false, $router.push({ path: '/warnManage/warnlist', query: { id: warn_item.id } })">确定</el-button>
              <el-button class="colorBtn big flex-1 ghost" @click="warnVisible = false">取 消</el-button>
            </span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import Header from './components/Header/index.vue'
import Progre from './components/Progress/index.vue'
import JessibucaDemo from '@/components/JessibucaDemo.vue'
import { warning_list } from '@/api/warn'
// import WebrtcPlayer from '@/components/webrtcPlayer.vue'

import {
  device_list, device_ctl, device_talk, device_play, device_gas, talk_url, talk_start, talk_stop, device_light
} from "@/api/bigdata";
import { set } from 'js-cookie'
export default {
  components: {
    Header, Progre, JessibucaDemo
  },
  watch: {
    currentNum: {
      handler(val) {
        if (val == 3) {
          this.spanNum = 8
          this.videoHeight = this.right_height / 2
          this.videoWidth = this.right_width / 3
          this.changeVideoNum(3)
        } else if (val == 4) {
          this.spanNum = 12
          this.videoHeight = this.right_height / 2
          this.videoWidth = this.right_width / 2
          this.changeVideoNum(4)
        } else if (val == 6) {
          this.spanNum = 8
          this.videoHeight = this.right_height / 2
          this.videoWidth = this.right_width / 3
          this.changeVideoNum(6)
        } else if (val == 8) {
          this.spanNum = 6
          this.videoHeight = this.right_height / 3
          this.videoWidth = this.right_width / 4
          this.changeVideoNum(8)
        } else if (val == 10) {
          this.spanNum = 6
          this.videoHeight = this.right_height / 3
          this.videoWidth = this.right_width / 4
          this.changeVideoNum(10)
        } else if (val == 12) {
          this.spanNum = 6
          this.videoHeight = this.right_height / 3
          this.videoWidth = this.right_width / 4
          this.changeVideoNum(12)
        } else if (val == 24) {
          this.spanNum = 4
          this.videoHeight = this.right_height / 4
          this.videoWidth = this.right_width / 6
          this.changeVideoNum(24)
        }
      }
    }
  },
  data() {
    return {
      light: false,
      list: [],
      child_id: '',
      threeData: [{ title: '最新热源', id: 0 }, { title: '最新警报', id: 1 }],
      value2: false,
      xhSwitch: false,
      smSwitch: false,
      dgSwitch: false,
      right_height: 0,
      right_width: 0,
      currentIndex: 0,
      videoUrl: '',
      currentVideo: 0,
      videoNum: [{ videoUrl: '' }, { videoUrl: '' }, { videoUrl: '' }, { videoUrl: '' }],
      ctl: {
        device_id: '',
        cmd: ''
      },
      fourData: {
        o2: '--',
        co: '--',
        h2s: '--',
        ex: '--'
      },
      currentNum: 4,
      videoWidth: '',
      videoHeight: '',
      spanNum: 12,
      controlHeight: 0,
      selectItem: {},
      warn_item: {},
      warnVisible: false,
      $audioSpeak: null,
      startSpeak: false,
      myInterval: null,
    };
  },
  mounted() {
    const dom = document.getElementById('videoContent');
    this.right_height = dom.offsetHeight
    this.right_width = dom.offsetWidth
    this.videoHeight = dom.offsetHeight / 2
    this.videoWidth = dom.offsetWidth / 2
    // this.videoUrl = "http://218.56.36.168:19080/live/39559/2024.06.06/39559_2024.06.06.10.36.34.228.flv"
    this.controlHeight = dom.offsetHeight - 289 - 195

    device_list().then(res => {
      let result = res
      if (result && result.length > 0) {
        result.forEach(e => {
          this.$set(e, 'isOpen', false)
        });
      }
      this.list = result
    })
  },
  beforeDestroy() {

  },
  methods: {
    switchValue(e) {
      // console.log(e)
      let light = ''
      if (e == true) {
        light = 'on'
      } else {
        light = 'off'
      }
      device_light({ device_id: this.selectItem.id, light: light }).then(res => {
        // console.log(res)
      })
    },
    initVideo(url) {
      console.log('播放器', this.$audioSpeak, url)
      //关闭流
      if (this.$audioSpeak) {
        this.$audioSpeak.close();
        this.$audioSpeak = null;
      }
      // let videoDom = document.getElementById(this.videoId);
      this.$audioSpeak = new window.ZLMRTCClient.Endpoint({
        debug: false, // 是否打印日志
        zlmsdpUrl: url, //流地址
        simulcast: false,
        useCamera: false,
        audioEnable: true,
        videoEnable: false,
        recvOnly: false,
        usedatachannel: false,
      });

      this.$audioSpeak.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function (e) { // ICE 协商出错
        console.log('ICE 协商出错')
      });

      this.$audioSpeak.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function (e) { //获取到了远端流，可以播放
        console.log('播放成功', e.streams)
        videoDom.addEventListener('canplay', function (e) {
          videoDom.play();
        })
      });
      this.$audioSpeak.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, function (e) { // offer anwser 交换失败
        console.log('offer anwser 交换失败', e)
        // this.$audioSpeak.destroy();
        // this.$audioSpeak = null;

      });

      this.$audioSpeak.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, function (s) { // 获取到了本地流
        console.log('offer anwser 交换失败', e)
      });

      this.$audioSpeak.on(window.ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, function (s) { // 获取本地流失败
        console.log('获取本地流失败')
      });

      this.$audioSpeak.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, function (
        state
      ) { // RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
        console.log('当前状态==>', state)
      });

      setTimeout(() => {
        talk_start({ id: this.selectItem.id }).then(res => { })
      }, 1 * 1000);

    },
    stop() {
      // let videoDom = document.getElementById(this.videoId);
      // videoDom.pause()
      //关闭流
      // this.$audioSpeak.pc.close()
      // this.$audioSpeak = null
      // this.$audioSpeak.close();
      // this.$audioSpeak = null;
      console.log('stop')
      this.startSpeak = false
      if (this.$audioSpeak) {
        this.$audioSpeak.close();
        this.$audioSpeak = null;
        talk_stop({ id: this.selectItem.id }).then(res => { })
      }
    },
    speakComputed() {
      {
        this.startSpeak = true
        if (this.selectItem && this.selectItem.id) {
          talk_url({ id: this.selectItem.id }).then(res => {
            this.initVideo(res.url)
          })
        }
      }
    },
    endComputed() {
      this.$audioSpeak.close();
      this.$audioSpeak = null;
    },
    sendStop() {
      this.device_control('Stop')
    },
    xhChange(e) {
      if (e == true) {
        this.device_control('Cruise')
      } else {
        this.sendStop()
      }
    },
    smChange(e) {
      if (e == true) {
        this.device_control('Scan')
      } else {
        this.sendStop()
      }
    },
    dgChange(e) {
      if (e == true) {
        this.device_control('LightOn')
      } else {
        this.device_control('LightOff')
      }
    },
    selTab(e, i) {
      if (i != 1) {
        this.currentIndex = e.id
      } else {
        warning_list().then(res => {
          let arr = res.data
          if (arr && arr.length > 0) {
            this.warn_item = arr[0]
            this.warnVisible = true
          }
        })
      }
    },
    closeVideo() {
      let item = this.videoNum[this.currentVideo]
      this.$set(item, 'videoUrl', '')
      return
    },
    changeVideoNum(num) {
      if (this.videoNum.length != num) {
        if (this.videoNum.length > num) {
          this.videoNum = this.videoNum.slice(0, num)
        } else {
          let shu = num - this.videoNum.length
          for (let i = 0; i < shu; i++) {
            this.videoNum.push({ videoUrl: '' })
          }
        }
      }
    },
    lookVideoUrl(e) {
      this.selectItem = e
      if (e.device_type == 10) {
        this.controlHeight = this.right_height - 330 - 195
      } else {
        this.controlHeight = this.right_height - 289 - 195
      }
      let item = this.videoNum[this.currentVideo]
      console.log(e)
      // this.fourData = e.data
      if (e.is_online == 10) {
        device_play({ id: e.id }).then(res => {
          this.$set(item, 'videoUrl', res.live_addr)
        })
      }
    },
    lookGasData(e) {
      let _this = this
      if (this.myInterval) {
        clearInterval(this.myInterval);
      }
      this.get_device_gas(e.id)
      this.myInterval = setInterval(() => {
        _this.get_device_gas(e.id)
      }, 10000)
    },
    get_device_gas(id){
      device_gas({ id: id }).then(res => {
          this.fourData = res
      })
    },
    device_control(cmd) {
      console.log(cmd)
      this.ctl.cmd = cmd
      this.ctl.device_id = this.selectItem.id
      if (this.ctl.device_id) {
        device_ctl(this.ctl).then(res => { })
      }
    },
    onPercentChange(e) {
      console.log(e)
    },
    numberShow(num) {
      console.log(num)
    }
  },
};
</script>
<style lang="scss" scoped>
#app {
  background-color: #080b1d !important;
}

.bigdata {
  min-height: 100vh;
  position: relative;
  background-image: url("./static/bigdata/bg.png");
  background-position: 50% 50%;
  background-repeat: repeat;
  background-color: #080b1d;


  .content {
    //padding: 0 20px;
    padding-right: 5px;
    width: 100%;
    color: #fff;
    margin-top: -110px;
    z-index: 1;

    .left {
      width: 400px;
    }
  }
}

.bigdata_body {
  .rotate-180 {
    transform: rotate(90deg);
  }

  //.index_left { width:485px;}
  // .index_right { width:485px;}
  .box {
    margin: 8px;
    position: relative;

    //> .light { width:416px; height:23px; background:resolve('bigdata/box_bottom_light.png') no-repeat; position:absolute; left:50%; transform:translate(-50%,0); bottom:-10px;}
    .hd {
      font-size: 14px;
      color: #ffffff;
      font-weight: bolder;
      cursor: default;
      position: relative;
      //background:resolve('bigdata/box_titlebg.png') 0 0 / 100% 100% no-repeat; margin-bottom:8px;
      background: url("./static/bigdata/box_titlebg.png") 0 0 / 100% 100% no-repeat;
      margin-bottom: 8px;

      &::before {
        content: "";
        width: 173px;
        height: 75px;
        background: url("./static/bigdata/bottom_line.png") no-repeat;
        position: absolute;
        top: 7px;
      }

      .time {
        width: 111px;
        height: 36px;
        background: url("./static/bigdata/sel_time.png") 0 0 / 100% 100% no-repeat;
      }

      .line {
        height: 1px;
        background: #00f5f7;
      }

      .ico {
        margin-right: 3px;
      }

      .title {
        display: inline-block;
        position: relative;
      }

      .block {
        position: absolute;
        width: 278px;
        height: 36px;
        right: 35px;
        top: 6px;
      }
    }

    .bd {
      color: #ffffff;
      font-size: 16px;
      background: linear-gradient(0deg,
          rgba(46, 64, 157, 0.4),
          rgba(46, 64, 157, 0));
      position: relative;
      top: 0px;

      &::before,
      &::after {
        content: "";
        display: block;
        width: 1px;
        height: 151px;
        background: url("./static/bigdata/box_line.png") no-repeat;
        position: absolute;
        top: 50%;
        transform: translate(0, -75px);
      }

      &::before {
        left: 0;
      }

      &::after {
        right: 0;
      }
    }
  }
}

.list {
  //height: calc(40vh - 220px);
  overflow-x: hidden;
  margin-right: -50px;
  /* Maximum width of scrollbar */
  padding-right: 50px;
  /* Maximum width of scrollbar */
  overflow-y: scroll;

  .item {
    .three_img {
      width: 12px;
      height: 10px;
      margin-right: 5px;
      transform: rotate(-90deg);
    }

    .rot {
      transform: rotate(0deg);
    }

    color: #fff;

    .title {
      cursor: pointer;
      font-size: 14px;
      padding: 15px 20px;
      background: linear-gradient(to right,
          rgba(46, 64, 157, 0.4),
          rgba(46, 64, 157, 0));
    }

    .active {
      background: linear-gradient(to right,
          rgba(46, 64, 157, 0.4),
          rgba(46, 64, 157, 0));
    }

    .co {
      padding: 15px;
      padding-left: 20px;
      font-size: 13px;
      cursor: pointer;

      .left_img {
        margin-right: 5px;
      }

      .zb {
        padding-right: 10px;
      }
    }

  }
}

.right {
  padding-top: 10px;

  .tab {
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    text-align: center;
    height: 36px;
    width: 150px;
    line-height: 36px;
    background-image: url('./static/bigdata/tab_img.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    // background-size: 100% 100%;
    margin-right: 10px;
  }

  ::v-deep.el-switch__core {
    //&::after{ background: rgb(14, 123, 180) !important;}
  }

  .tab_sel {
    color: #00f5f7;
    font-weight: bold;
  }

  ::v-deep.el-switch__label {
    color: #fff !important;
  }

  .grid_item {
    border: 1px solid #999;
    margin: 5px 0;
    background: #000;
  }

  .active {
    border-color: #00f5f7;
  }
}

.right_btn {
  cursor: pointer;
  margin-left: 10px;
  width: 80px;
  height: 30px;
  background-image: url('./static/bigdata/btn_bg.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 14px;
  text-align: center;
  line-height: 30px;

  ::v-deep .el-dropdown {
    color: #fff !important;
  }

  ::v-deep .el-switch__label {
    background: none !important;
    color: #fff;
  }

  .btn_bg {
    width: 117px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url('./static/bigdata/c_btn_bg.png');
    margin-left: 50px;

    ::v-deep .el-dropdown {
      color: #fff !important;
    }
  }

  ::v-deep .el-checkbox__label {
    color: #fff !important;
  }
}

.show {
  width: 375px;
  height: 125px;
  background-image: url('./static/bigdata/show_bg.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  margin-top: 10px;

  .item {
    padding-top: 30px;

    .title {
      font-size: 14px;
      color: #ffffff;
    }

    .title2 {
      font-size: 24px;
      font-weight: bold;
      color: #cfa72f;
    }

    .title3 {
      font-size: 12px;
    }
  }
}

.kz_content {
  .four_btn {
    width: 209px;
    height: 209px;
    background-image: url('./static/bigdata/four_controll.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 30px;
  }

  .right_btn {
    padding: 0 30px 0 0;

    .some_btn {
      width: 36px;
      height: 36px;
      background-repeat: no-repeat;
      background-position: 0 0;
      margin-bottom: 10px;
      cursor: pointer;
    }

    .add {
      background-image: url('./static/bigdata/c_add.png');
    }

    .search {
      background-image: url('./static/bigdata/c_search.png');
      width: 25px;
      height: 25px;
    }

    .reduce {
      background-image: url('./static/bigdata/c_reduce.png');
    }

    .sxj {
      background-image: url('./static/bigdata/c_look.png');
      width: 30px;
      height: 18px;
    }

    .circle {
      background-image: url('./static/bigdata/c_circle.png');
      width: 28px;
      height: 28px;
    }

    .photo {
      background-image: url('./static/bigdata/c_photo.png');
    }

    .biu {
      background-image: url('./static/bigdata/c_biu.png');
    }
  }

  .bottom_content {
    padding: 20px 30px 0 30px;

    ::v-deep .el-switch__label {
      background: none !important;
      color: #fff;
    }

    .btn_bg {
      width: 117px;
      height: 30px;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-image: url('./static/bigdata/c_btn_bg.png');
      margin-left: 50px;

      ::v-deep .el-dropdown {
        color: #fff !important;
      }
    }

    ::v-deep .el-checkbox__label {
      color: #fff !important;
    }
  }

  .c_progress {
    padding: 0 30px;
  }

  .nine_btn {
    width: 209px;
    height: 209px;
    background-image: url('./static/bigdata/n_controll.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 30px 10px 30px;

    .nine_bg {
      height: 100%;
      width: 100%;
      border-radius: 90px;
      position: relative;
      background: transparent;
      position: relative;
      list-style: none;
      overflow: hidden;

      .center {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        //background: #00f5f7;
        //background: url('paly.png') no-repeat center center / 60% 60%;

      }

      .slice {
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 50%;
        transform-origin: 0% 100%;
        //background: red;
      }

      .slice-one {
        transform: rotate(-22.5deg) skewY(-45deg);

      }

      .slice-one img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 100px;
        margin-left: 30px;
      }

      .slice-two {
        transform: rotate(22.5deg) skewY(-45deg);

      }

      .slice-two img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 100px;
        margin-left: 30px;
      }

      .slice-three {
        transform: rotate(67.5deg) skewY(-45deg);

      }

      .slice-three img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 100px;
        margin-left: 30px;
      }

      .slice-four {
        transform: rotate(112.5deg) skewY(-45deg);

      }

      .slice-four img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 100px;
        margin-left: 30px;
      }

      .slice-five {
        transform: rotate(157.5deg) skewY(-45deg);

      }

      .slice-five img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 100px;
        margin-left: 30px;
      }

      .slice-six {
        transform: rotate(202.5deg) skewY(-45deg);

      }

      .slice-six img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 100px;
        margin-left: 30px;
      }

      .slice-seven {
        transform: rotate(247.5deg) skewY(-45deg);

      }

      .slice-seven img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 100px;
        margin-left: 30px;
      }

      .slice-eight {
        transform: rotate(292.5deg) skewY(-45deg);

      }

      .slice-eight img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 100px;
        margin-left: 30px;
      }
    }
  }

  .new_p {
    padding-top: 0;
    padding-bottom: 20px;
  }
}

.comDialog {
  ::v-deep.el-dialog__header {
    display: none;
  }

  ::v-deep .el-dialog {
    background: transparent;

    .content {
      border-radius: 3px;
      background: rgb(50, 86, 198, 1);
      border: 1px solid rgb(50, 86, 198);

      .header {
        padding: 10px 0;
        border-bottom: 1px solid #ffffff;

        .title {
          font-size: 24px;
          color: #ffffff;

          &::before {
            content: '';
            width: 4px;
            height: 19px;
            background: #ffffff;
            display: inline-block;
            margin-right: 10px;
          }
        }
      }

      .body {
        padding: 20px;

        .b_content {
          color: #ffffff;
          padding-bottom: 20px;

          .item {
            padding-bottom: 10px
          }

          .name {
            font-size: 18px;
            font-weight: bold;
          }
        }

        .dialog-footer {
          width: 80%;
        }
      }

      &::before {
        content: '';
        display: block;
        width: 412px;
        height: 29px;
        background: url('../../views/bigdata/static/bigdata/line_top.png') no-repeat;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      ;

      &::after {
        content: '';
        display: block;
        width: 412px;
        height: 29px;
        background: url('../../views/bigdata/static/bigdata/line_bott.png') no-repeat;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -100%);
      }
    }
  }
}
</style>
